<template>
  <el-dialog
      v-model="JfwbDialogcompile"
      title="经费外拨详情"
      :close-on-click-modal="false"
      width="80%"
  >
    <div>
      <div>
        <div class="title-col">
          <span>基本信息</span>
          <el-link
              type="primary"
              v-if="projectInfo.processInstanceId != null && projectInfo.processInstanceId != ''"
              class="title-right"
              @click="checkHistoryModalVisible = true"
          >
            审核记录
          </el-link></div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="项目名称">
            <span>{{ projectInfo.projectName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            <span>{{ projectInfo.chargerName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="外拨总金额">
            <span>{{ turnWanyuan(projectInfo.outFee) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="已拨经费">
            <span>{{ turnWanyuan(projectInfo.isOutFee) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="可外拨金额">
            <span>{{ turnWanyuan(projectInfo.notOutFee )}}</span>
          </el-descriptions-item>
          <el-descriptions-item label="申请外拨日期">
            <span>{{ projectInfo.outbounddate }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="外拨待审核金额">
            <span>{{ turnWanyuan(projectInfo.outFeeIncheck) }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <div class="title-col">外拨信息</div>
        <el-table :data="projectInfo.projectOutboundList" border>
          <el-table-column label="序号" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="unitName" label="合作单位名称">
            <template #default="scope">
              <span>{{ scope.row.unitName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="chargerName" label="负责人">
            <template #default="scope">
              <span>{{ scope.row.chargerName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="已外拨/未外拨(万元)">
            <template #default="scope">
              <span>{{ turnWanyuan(scope.row.isOutFee)}}/{{turnWanyuan(scope.row.notOutFee)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="外拨经费(万元)">
            <template #default="scope">
              <span>{{ scope.row.outboundFee }}</span>
            </template>
          </el-table-column>
          <el-table-column label="银行名称">
            <template #default="scope">
              <span>{{ scope.row.bankName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="银行账号">
            <template #default="scope">
              <span>{{ scope.row.bankNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
<!--        <el-button @click="handleSave">保存</el-button>-->
<!--        <el-button type="primary" @click="handleSaveAndPass">保存并通过</el-button>-->
        <el-button @click="JfwbDialogcompile = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <CheckHistoryModal
      v-model="checkHistoryModalVisible"
      :procInsId="projectInfo.processInstanceId"
      :checker="projectInfo.checker"
      :checkDate="projectInfo.checkdate"
  />
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import {
  getEditInfo,
  edit
} from '@/api/money/jfwbApi.js'
import {turnWanyuan, turnyuan, convertOutboundFeeToYuan, convertOutboundFeeToWanYuan} from './../../../utils/money.js'
import { ElMessage } from "element-plus";
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
//查看审核流程
const  checkHistoryModalVisible = ref(false)
// checkdate: "2025-05-06 13:41:24"
// checker: "白雪


// 接收父组件传递的 props
const props = defineProps({
  projectInfo: {
    type: Object,
    default: () => ({})
  },
  tableData: {
    type: Array,
    default: () => []
  }
});

// 模拟表格数据
const tableData = ref([
  {
    index: 3600,
    coopUnitName: '合作单位 1',
    leader: '李四',
    status: '未外拨',
    isOutFee: 0,
    bankName: '',
    bankAccount: ''
  },
  {
    index: 2,
    coopUnitName: '合作单位 2',
    leader: '王五',
    status: '已外拨',
    isOutFee: 0,
    bankName: '',
    bankAccount: ''
  }
]);

// 模拟项目信息数据
const projectInfo = ref({
  status: '-1',//保存传-1，保存并通过传2"
  projectName: '',
  projectId: '',
  outFee: '',//外拨总金额
  availableAllocatedAmount: '',
  outbounddate: new Date(),
  chargerName: '', //负责人名称
  isOutFee: '',//已拨经费
  outFeeIncheck: '',//外拨待审核金额
  projectOutboundList: [
    {
      index: '',
      unitName: '',//合作单位名称
      chargerName: '',//负责人
      isOutFee: '', //已外拨(万元)
      notOutFee: '',//未外拨
      outboundFee: '',//外拨经费(万元)
      bankName: '',//银行名
      bankNum: ''//卡号
    }
  ]
});
const JfwbDialogcompile = ref(false);

// 定义事件，用于通知父组件保存操作
const emits = defineEmits(['getlist', 'save','saveAndPass', 'close', 'getselectVproject']);

// 检查外拨经费是否不大于未外拨经费，并记录不符合项的合作单位名称
const checkOutboundFee = () => {
  const invalidUnitNames = [];
  for (const item of projectInfo.value.projectOutboundList) {
    const outboundFeeInYuan = (parseFloat(item.outboundFee) || 0) * 10000;
    const notOutFee = parseFloat(item.notOutFee) || 0;
    if (outboundFeeInYuan > notOutFee) {
      invalidUnitNames.push(item.unitName);
    }
  }
  if (invalidUnitNames.length > 0) {
    ElMessage({
      type: 'error',
      message: `存在外拨经费大于未外拨经费的情况，涉及合作单位：${invalidUnitNames.join(', ')}，请重新输入！`
    });
    return false;
  }
  return true;
};

// 保存按钮点击事件处理函数
const handleSave = () => {
  if (!checkOutboundFee()) {
    return;
  }
  projectInfo.value.status = '-1';
  edit(convertOutboundFeeToYuan(projectInfo.value))
      .then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: res.msg
          });
          JfwbDialogcompile.value = false;
          emits('getlist');
        } else {
          ElMessage({
            type: 'info',
            message: res.msg
          });
        }
      });
};

// 保存并通过按钮点击事件处理函数
const handleSaveAndPass = () => {
  if (!checkOutboundFee()) {
    return;
  }
  projectInfo.value.status = '2';
  edit(convertOutboundFeeToYuan(projectInfo.value))
      .then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: res.msg
          });
          JfwbDialogcompile.value = false;
          emits('getlist');
        } else {
          ElMessage({
            type: 'info',
            message: res.msg
          });
        }
      });
};

// 定义一个方法用于打开弹窗
const opencompileDialog = (row) => {
  JfwbDialogcompile.value = true;
  getEditInfo({ Id: row.id })
      .then((res) => {
        if (res.data) {
          projectInfo.value = res.data;
          projectInfo.value = convertOutboundFeeToWanYuan(res.data);
        }
        console.log( projectInfo.value)
      });
};

// 暴露 openDialog 方法供父组件调用
defineExpose({
  opencompileDialog
});
</script>

<style scoped lang="scss">
.title-col {
  color: #337AB7;
  font-weight: bolder;
  margin: 10px 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.title-right{
  margin-left: 89%;
}
</style>